<template>
  <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height: 100%;" @ready="handler"
    @click="getClickInfo" :style="getStyle" class="mymap">
    <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
    <bm-boundary name="襄阳市樊城区" :strokeWeight="20" strokeColor="#008080" fillColor="#D3D2CD"></bm-boundary>
    <bm-boundary name="襄阳市襄城区" :strokeWeight="20" strokeColor="#008080" fillColor="#E5C3A4"></bm-boundary>
    <bm-boundary name="襄阳市襄州区" :strokeWeight="20" strokeColor="#008080" fillColor="#C9AD92"></bm-boundary>
    <bm-boundary name="襄阳市保康县" :strokeWeight="2" strokeColor="white" fillColor="rgb(194,208,207)"></bm-boundary>
    <bm-boundary name="襄阳市谷城县" :strokeWeight="2" strokeColor="white" fillColor="rgb(174,203,221)"></bm-boundary>
    <bm-boundary name="襄阳市南漳县" :strokeWeight="2" strokeColor="white" fillColor="rgb(235,196,196)"></bm-boundary>
    <bm-boundary name="襄阳市枣阳市" :strokeWeight="2" strokeColor="white" fillColor="rgb(221,207,173)"></bm-boundary>
    <bm-boundary name="襄阳市老河口市" :strokeWeight="2" strokeColor="white" fillColor="rgb(154,177,189)"></bm-boundary>
    <bm-boundary name="襄阳市宜城市" :strokeWeight="2" strokeColor="white" fillColor="rgb(213,197,213)"></bm-boundary>

    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
    <bm-marker v-for="(project,index) in projects" :key="index" :position="{lng: project.lng, lat: project.lat}"
      @click="infoWindow(project)" :icon="{url: project.icon, size:{width:32,height:32}}">
      <bm-info-window :show="project.mapshow" @close="infoWindowClose" :width="0" :height="0">
        <el-form style="width: 700px; height: 200px;">
          <div style="display: flex; justify-content: space-between; margin-right: 30px;">
            <router-link to="/biddetail">
              <p style="font-size: 18px; font-weight: 800; margin-top:0px;">{{project.xmmc}}</p>
            </router-link>
            <div
              style="width: 70px; height: 25px; color: white; text-align: center; vertical-align: middle; line-height: 25px;"
              :style="{ backgroundColor: project.color  }">{{project.cfont}}</div>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <div class="font_sm">
              <p>详细地址：{{project.xxdz}}</p>
              <p>联系电话：{{project.lxdh}}</p>
            </div>
            <div class="font_sm">
              <p>
                项目代号：{{project.xmdm}}
              </p>
            </div>
          </div>
          <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
              <el-descriptions class="margin-top" :column="2" :size="size" border>
                <el-descriptions-item>
                  <template slot="label">
                    年度
                  </template>
                  {{project.nd}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    主管单位
                  </template>
                  {{project.zgdw}}
                </el-descriptions-item>
                <el-descriptions-item style="width: 100%;">
                  <template slot="label">
                    项目内容
                  </template>
                  {{project.xmnr}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    总投资
                  </template>
                  {{project.ztz}}
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <el-tab-pane label="项目监控" name="second">
              <div style="display: flex; justify-content: space-around;">
                <img src="../../assets/image/project.jpg" alt="" width="45%" height="30%">
                <img src="../../assets/image/project.jpg" alt="" width="45%" height="30%">
              </div>
            </el-tab-pane>
          </el-tabs> -->
        </el-form>
      </bm-info-window>
    </bm-marker>
    <bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
      <div style="display: flex; flex-direction:column; padding: 5px;">
        <button style="margin-bottom: 5px; background-color: white; padding-left: 2px;"><img
            src="../../assets/image/bue_marker.png" />
          <span>已完成</span></button>
        <button style="margin-bottom: 5px; background-color: white; padding-left: 17px;"><img
            src="../../assets/image/red_marker.png" />
          <span>建设异常</span></button>
        <button style="margin-bottom: 5px; background-color: white; padding-left: 0px;"><img
            src="../../assets/image/green_marker.png" /><span>进行中</span></button>
      </div>
    </bm-control>
  </baidu-map>
  <!-- 因为我采用的是全局注册，所以不用再在该页面上注册components -->
</template>
var map = new BMap.map("mymap");
</script>
<script>
  import blue from '../../assets/image/bue_marker.png'
  import red from '../../assets/image/red_marker.png'
  import green from '../../assets/image/green_marker.png'

  export default {
    name: "mBox",
    props: {
      width: {
        type: Number,
        default: 100
      },
      height: {
        type: Number,
        default: 100
      }
    },
    data() {
      return {
        size: '',
        activeName: 'second',
        active: false,
        center: {
          lng: 0,
          lat: 0
        }, //经纬度
        zoom: 12, //地图展示级别

        projects: [{
            lng: 112.212704,
            lat: 32.011972,
            address: "东津大桥",
            icon: blue,
            color: "#0099ff",
            cfont: "已完成",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.132539,
            lat: 32.01038,
            address: "襄阳市",
            icon: blue,
            color: "#0099ff",
            cfont: "已完成",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.138575,
            lat: 32.090196,
            address: "襄樊高新区汉北工业园",
            icon: red,
            cfont: "建设异常",
            color: "red",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.244647,
            lat: 32.103533,
            address: "襄州站",
            icon: green,
            color: "yellowgreen",
            cfont: "进行中",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.13915,
            lat: 32.068169,
            address: "万达广场",
            icon: green,
            color: "yellowgreen",
            cfont: "进行中",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.231425,
            lat: 32.075879,
            address: "东津事务大楼",
            icon: blue,
            color: "#0099ff",
            cfont: "已完成",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.199517,
            lat: 32.128856,
            address: "悦活荟购物广场",
            icon: red,
            color: "red",
            cfont: "建设异常",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "湖北省襄阳市东津新区东西轴线东津",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          },
          {
            lng: 112.183419,
            lat: 32.051521,
            address: "渔梁州",
            icon: blue,
            color: "blue",
            cfont: "已完成",
            mapshow: false,
            xmmc: "XXX项目",
            xxdz: "渔梁州",
            lxdh: "0710-6868886",
            xmdm: "xys0001",
            nd: "2017",
            zgdw: "",
            xmnr: "2021年底开通樊城段",
            ztz: "3亿(元)",
            gcfy: "",
            qx: "",
            ytz: "",
            mqjd: "",
            jdms: ""
          }
        ],
      };
    },
    methods: {
      handler({
        BMap,
        map
      }) {
        console.log(BMap, map);
        //襄阳经纬度
        this.center.lng = 112.132539;
        this.center.lat = 32.01038;
        this.zoom = this.zoom;
      },

      getClickInfo(e) {
        //点击获取经纬度
        console.log(e.point.lng);
        console.log(e.point.lat);
        this.center.lng = e.point.lng;
        this.center.lat = e.point.lat;
      },
      infoWindowClose(project) {
        console.log("-----------------" + project.mapshow)
        project.mapshow = false
      },
      // 打开窗体
      infoWindowOpen(project) {
        project.mapshow = true
      },
      infoWindow(project) {
        project.mapshow = !project.mapshow
      },
      draw({
        el,
        BMap,
        map
      }) {
        const pixel = map.pointToOverlayPixel(new BMap.Point(0, 0))
        el.style.left = pixel.x - 60 + 'px'
        el.style.top = pixel.y - 20 + 'px'
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
    },
    computed: {
      getStyle() {
        console.log(`width: ${this.width}%; height: ${this.height}%;`)
        return `width: ${this.width}%; height: ${this.height}%;`
      }
    },
  };

</script>

<style lang="scss" scoped>
  .sample {
    width: 500px;
    height: 500px;
    line-height: 40px;
    background-color: white;
    overflow: hidden;
    color: #000;
    text-align: center;
    padding: 10px;
    position: absolute;
  }

  .font_sm {
    font-size: 14px;
  }

  .BMap_cpyCtrl {
    display: none;
  }

  /deep/.anchorBL {
    display: none;
  }

</style>
